<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 测试实例</title>
  <script src="https://unpkg.com/vue@3.5.13"></script>
</head>

<body>
<div id="v-model-example">
  <p>First name: {{ firstName }}</p>
  <p>Last name: {{ lastName }}</p>
  <user-name
          v-model:first-name="firstName"
          v-model:last-name="lastName"
  ></user-name>
</div>


<script>
  const UserName = {
    props: {
      firstName: String,
      lastName: String
    },
    template: `
    <input
      type="text"
      :value="firstName"
      @input="$emit('update:firstName', $event.target.value)">

    <input
      type="text"
      :value="lastName"
      @input="$emit('update:lastName', $event.target.value)">
  `
  };

  const HelloVueApp = {
    components: {
      UserName,
    },
    data() {
      return {
        firstName: 'John',
        lastName: 'Doe',
      };
    },
  };

  Vue.createApp(HelloVueApp).mount('#v-model-example')
</script>
</body>
</html>

